<template>
	<view class="coupon-box" @click.stop="handleClick">
		<view class="left" :class="info.checked?'bg-left-gray':'bg-left'" >
			<text class="text-center line-height-1" >
				<text class="text-price"></text>
				<text :class="info.checked?'text-666':'text-72'">{{ info.money | filterPrice }}</text>
				<br>
				<text
					class="text-sm" :class="info.checked?'text-666':'text-coupon-red'">{{i18n['满']}}{{ info.min_order_money | filterPrice }}{{i18n['元']}}{{i18n['可减']}}</text>
			</text>
		</view>
		<view class="right" :class="info.checked?'bg-right-gray':'bg-right'">
			<view class="content">
				<view :class="info.checked?'text-666':'text-white'" class="text-bold text-df text-cut">{{ info.name }}</view>
				<view :class="info.checked?'text-666':'text-white'" class="text-sm" >{{i18n['全场可用']}}</view>
				<view :class="info.checked?'text-666':'text-white'" class="text-sm">{{i18n['有效期至']}}: {{ info.end_time }}</view>
			</view>
			<view class="action" >
				<button class="cu-btn" :class="[info.checked ? 'disabled' : '']" @tap='handleClick'>
					{{ info.checked ? '已选择' : '选择' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			},
			index: {
				type: Number,
				default: 0
			},
			// discountPrice: {
			// 	type: [String, Number]
			// },
			// name: {
			// 	type: String
			// },
			// time: {
			// 	type: String
			// },
			// limit: {
			// 	type: [String, Number]
			// },
			// isUse: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		filters: {
			filterPrice(price) {
				return parseFloat(price);
			}
		},
		created() {
			console.log("info: ", this.info);
		},
		methods: {
			handleClick() {
				this.info.index = this.index;
				this.$emit('choose', this.info);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.coupon-box {
		height: 200rpx;
		display: flex;
		position: relative;
		z-index: 20;

		.right {
			flex: 1;
			border-bottom-right-radius: 16rpx;
			border-top-right-radius: 16rpx;
			display: flex;
			overflow: hidden;
			text-align: left;

			&.bg-right {
				background: url(https://localelife.chunchuangkeji.cn/images/bg-right.png) no-repeat;
				// background-size: 200rpx 200rpx;
				background-size: 100% 200rpx;
			}

			&.bg-right-gray {
				background: url(https://localelife.chunchuangkeji.cn/images/bg-right-gray.png) no-repeat;
				// background-size: 200rpx 200rpx;
				background-size: 100% 200rpx;
				color: #666;
			}

			.content {
				flex: 1;
				padding: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				overflow: hidden;
			}

			.action {
				// width: 46rpx;
				// height: 130rpx;
				// line-height: 130rpx;
				// text-align: center;
				// margin-top: 18px;
				// margin-right: 15px;
				// border-radius: 20px;
				// background: #FFEEDF;
				// color: #CD3E35;
				// font-size: 22rpx;

				// width: 60rpx;
				// min-width: 60rpx;
				// max-width: 60rpx;
				// height: 100%;
				// background: #FFEEDF;
				// background-image: url(images/bg-left.png);
				// background-size: 60rpx 60rpx;
				// font-family: PingFang SC;
				// font-size: 28rpx;
				// font-weight: 400;
				writing-mode: tb-rl;
				letter-spacing: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			button {
				width: 46rpx;
				height: 130rpx;
				line-height: 130rpx;
				text-align: center;
				margin-right: 15px;
				border-radius: 20px;
				background: #FFEEDF;
				color: #CD3E35;
				font-size: 22rpx;
			}
			button.disabled {
				color: #ffffff;
				background: #898989;
			}
		}

		.left {
			width: 200rpx;
			min-width: 200rpx;
			max-width: 200rpx;
			height: 100%;
			border-bottom-left-radius: 16rpx;
			border-top-left-radius: 16rpx;
			color: #FF503B;
			font-family: Arial;
			font-size: 56rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			// background-image: url(images/bg-left.png);
			// background-size: 60rpx 60rpx;
			&.bg-left {
				background: url(https://localelife.chunchuangkeji.cn/images/bg-left.png) no-repeat;
				background-size: 200rpx 200rpx;
			}

			&.bg-left-gray {
				background: url(https://localelife.chunchuangkeji.cn/images/bg-left-gray.png) no-repeat;
				background-size: 200rpx 200rpx;
				color: #666;
			}

			.text-price {
				font-size: 24rpx;
			}
		}
	}

	.line-height-1 {
		line-height: 1;
	}

	.text-coupon-red {
		color: #FF503B;
	}

	.text-72 {
		font-size: 72rpx;
		color: #FF503B;
	}
	.text-666 {
		color: #666;
	}
</style>
